﻿<!DOCTYPE HTML >
<html>
<head>
    <title>websockets client</title>
    <script src="jquery-1.5.1.min.js" type="text/javascript"></script>
    <!--<script src="js/javascript-1.8.5.js" type="text/javascript"></script>-->    
    <script type="text/javascript">
        var ws;
        var connectfd;
        var N = 40;
        var messages = [];// Array(N);
        //var returnedMessages = [];
        var port = "38950";
        var url = "ws://127.0.0.1:" + port + "/resourcePath";
        var _in = 0, _out = 0;

        $(document).ready(function () {
            $("#url").html(url);
            openConnection();
            $("#textbox").change(function () {
                ws.send($('#textbox').val() + "<br/>");
                $("#sent").append($("#textbox").val() + "<br/>");
            });
            $("#auto-send").click(function () {
                sendRecursive();
            });

            $("#N").change(function (data) {
                N = parseInt($("#N").val());
            });
            $("#N").val(N);
        });


        function sendRecursive() {
            var str = connectfd + "[" + _in + "]";
            messages.push(str);
            ws.send(str);
            $("#sent").append(str + " ");
            _in += 1;
            if (_in % N == 0) {
                return;
            }
            else {
                setTimeout(function () { sendRecursive(); }, 100);
            }            
        }


        function onMessage(evt) {
            if (typeof evt !== "undefined" && typeof evt.data == "string") {
                var str = evt.data.toString();
                var re = /(socket descriptor)([^\d]+)(\d+)/i;
                var found = str.match(re);
                if (found) {
                    connectfd = found[3];
                    $("#socketinfo").html("socket descriptor: " + connectfd);
                    sendRecursive();
                }
                else {//it's a typical server response for concurrency test:
                  
                    var msg = messages[_out];
                    _out += 1;
                    if (msg != str && msg !== $("textblox").val()) {
                        $("#out").append("expected: " + msg + ". actual: " + str + "<br/>");
                    }
                    
                }

            }
        }

        function onOpen(evt) {
            $("#connection_status").html("");
            $("#connection_status").append('websocket connected.<br/>');            
        }

        function openConnection() {

            ws = new WebSocket(url);
            ws.onmessage = onMessage;

            ws.onopen = onOpen;

            ws.onclose = function () {
                $("#connection_status").html("");
                $("#connection_status").append('connection closed.</br>');
            }

        }

    </script>
    <style type="text/css">
        table
        {
            width: 800px;
            margin: 20px 20px 0px 0px;
        }
        body
        {
            font-family: Trebuchet MS;
            font-size: 0.7em;
        }        
        #N { width: 100px }
        #url { font-family: Consolas; font-size: 1em; }
        #sent { font-family: Consolas; font-size: 1em; }
        #ack { font-family: Consolas; font-size: 1em; }
        #out { color:Red; font-family: Consolas; font-size: 1em; }
        #connection_status { font-family: Consolas; font-size: 1em; }
        #socketinfo { font-family: Consolas; font-size: 1em; }
    </style>
</head>
<body>
    <div>
      <table>
            <thead>
                <tr>
                </tr>
            </thead>
            <tr>
                <td>
                Enter arbitrary text to send to websocket server (TAB or ENTER):
                </td>
                <td>
                Concurrency test. Click to auto-send messages to server:
                </td>                
            </tr>
            <tr>
            <td><input id='textbox' type='text' value='' /></td>
            <td><label for="N">Messages:</label> <input type="number" id="N" /> <button id="auto-send" >Auto-send</button></td>
            </tr>
        </table>
        
        <br />
        <p>
            <span id="url" />
        </p>
        <br />
        <p id='connection_status' />
        <br />
        <p id='socketinfo' />
        <div>
            <h4>
                sent:</h4>
            <p id="sent" />
        </div>             
        <div>
            <h4>Output:</h4>
            <p id='out' />
        </div>
      
    </div>
</body>
</html>
